<template>
  <el-dialog
    :model-value="true"
    title="课程修改"
    width="80%"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-form ref="myForm" :model="formData" :rules="rules" label-width="100px">
      <el-row>
        <el-col :md="12" :sm="24">
          <el-form-item label="班级名称" prop="name">
            <el-input v-model="formData.name" maxlength="32" />
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="班级方向" prop="classify">
            <el-input
              v-model="formData.classify"
              maxlength="32"
              placeholder="填写java、vue、python等"
            />
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="入班方式" prop="entry">
            <entry-select
              v-model="formData.entry"
              :empty="false"
            ></entry-select>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="年级" prop="grade">
            <el-date-picker
              v-model="formData.grade"
              type="year"
              format="YYYY"
              value-format="YYYY"
              placeholder="选择年份"
            />
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="状态" prop="status">
            <status-select
              :empty="false"
              v-model="formData.status"
            ></status-select>
          </el-form-item>
        </el-col>
        <el-col :md="24">
          <el-form-item label="封面图" prop="cover">
            <image-upload v-model="formData.cover" />
          </el-form-item>
        </el-col>
        <el-col :md="24">
          <el-form-item label="班级描述" prop="description">
            <el-input
              type="textarea"
              v-model="formData.description"
              maxlength="256"
              :rows="5"
              resize="none"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-button type="warning" @click="handleClose">取消</el-button>
        <el-button @click="handleReset">重置</el-button>
        <el-button
          type="primary"
          @click.prevent="handleUpdate(myForm)"
          native-type="submit"
          >修改</el-button
        >
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { defineProps, reactive, ref, defineEmits, watch } from "vue";
import StatusSelect from "@/components/public/StatusSelect.vue";
import ImageUpload from "@/components/public/ImageUpload.vue";
import EntrySelect from "./EntrySelect.vue";
import { FormRules, FormInstance } from "element-plus";
import request from "@/utils/request";

const props = defineProps({
  // 行数据
  rowData: {
    type: Object,
    required: true,
  },
});

// 记录是否修改了数据
let updateData = false;

// 定义事件触发器
const emits = defineEmits(["close"]);

// 接收表单参数
const formData = reactive({
  name: "",
  description: "",
  cover: "",
  classify: "",
  entry: 1,
  grade: 2024,
});

const myForm = ref<FormInstance>();

const rules = reactive<FormRules>({
  name: [{ required: true, message: "请输入标题", trigger: "blur" }],
  classify: [{ required: true, message: "请输入班级方向", trigger: "blur" }],
  cover: [{ required: true, message: "请上传封面图", trigger: "blur" }],
  grade: [{ required: true, message: "请输入年级", trigger: "blur" }],
});

const handleClose = () => {
  emits("close", updateData);
  updateData = false;
};

const handleReset = () => {
  // 重置表单
  Object.assign(formData, props.rowData);
};

const handleUpdate = (myForm: FormInstance) => {
  myForm.validate((valid) => {
    // 校验失败
    if (!valid) {
      return;
    }

    // 发起请求
    request({
      data: formData,
      method: "POST",
      url: "/class/update",
    }).then((res) => {
      if (res.data.code > 0) {
        updateData = true;
        alert("修改成功");
        handleClose();
      } else {
        alert("修改失败");
      }
    });
  });
};

// 侦听父传子的参数变化
watch(
  () => props.rowData,
  (newVal) => {
    if (!newVal) {
      return;
    }
    // 将newVal的值合并到formData中，然后组件便根据formData填充值
    // 将数值转为字符串
    newVal.grade = newVal.grade.toString();
    Object.assign(formData, newVal);
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
:deep(.w-e-text-container video) {
  width: 100%;
}
</style>